<style>
    .beaut {
        width: 25px;
        height: 25px;
        position: relative;
        top: 6px;
        right: 100px;
    }
</style>
<template>
    <button @click="Show">点击弹框</button>
    <div id="food">
        <actionsheet :show.sync="show">
            <div slot="firstTitle" @click="clickFirst">
                <img class="beaut" :src="wxSrc" />
                <span>微信支付</span>
            </div>
            <div slot="lastTitle" @click="clickLast">
                <img class="beaut" :src="zfbSrc" />
                <span>支付宝付</span>
            </div>
        </actionsheet>
    </div>
</template>
<script>
    import actionsheet from './actionsheet.vue'

    export default {
        components: {
            actionsheet
        },
        data: function() {
            return {
                wxSrc: "./src/img/weixin.png",
                zfbSrc: "./src/img/zhifubao.png",
                show: false
            }
        },
        ready: function(){
            
        },
        methods: {
            Show: function() {
                this.show= true
            },
            clickFirst: function() {
                this.show= false
                console.log("1111")
            },
            clickLast: function() {
                this.show= false
            }
        }
    }
</script>